<!--
 * @Description: 数据接口
-->
<template>
	<div>
        <a-input v-model="value" @click="openModal" placeholder="请选择数据接口">
            <a-tooltip slot="suffix">
                <a-icon type="down" style="color: rgba(0,0,0,.45)" />
            </a-tooltip>
            <template slot="addonAfter">
                <div @click="addPort()" style="cursor: pointer;">
                    添加接口
                </div>
            </template>
        </a-input>
        <t-modal title="数据接口" :width="1000" :visible="visible" switchFullscreen wrapClassName="t-popup-modal"
            @ok="handleSubmit" @cancel="handleCancel" cancelText="关闭" destroyOnClose>
            <a-alert message="静态数据不支持在视图数据展示" banner style="margin-top: 10px;"/>
            <a-row :gutter="10">
                <a-col :md="24" :sm="24">
                    <a-card :bordered="false" >
                        <tool-bar @search="search" @reset="reset">
                            <template slot="toolForm">
                                <a-form-item label="接口分类">
                                    <a-select 
                                    @click="openModal"
                                    style="width: 200px;" 
                                    placeholder="请选择接口分类"
                                    show-search
                                    :filter-option="filterOption" 
                                    @select="masterRowClick"
                                    v-model="selectOption"
                                    >
                                        <a-select-option v-for="item in classifyData" :key="item.uuid">{{ item.classificationName }}</a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="接口名称">
                                    <a-input v-model="queryParam.interfaceName" placeholder="接口名称" />
                                </a-form-item>
                            </template>
                        </tool-bar>
                        <div class="page-common-sub-box">
                            <s-table ref="subList" :columns="columns" rowKey="uuid" :data="loadData"
                                :rowSelection="rowSelection" :scroll="scrollXY" :customRow="selectThis">
                                <span slot="serial" slot-scope="text, record, index">
                                    {{ index + 1 }}
                                </span>
                                <template slot="renderInterfaceType" slot-scope="text">
                                    {{ text | interfaceTypeFilters }}
                                </template>
                            </s-table>
                        </div>
                    </a-card>
                </a-col>
            </a-row>
        </t-modal>
    </div>
</template>

<script>
	import {
		STable,
        TableClassify
	} from "@/components";

	export default {
		components: {
			STable,
            TableClassify
		},
        model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
                type: String
            }
		},
        filters: {
			interfaceTypeFilters(val) {
				switch (val) {
                    case "intetface_type.01":
                        return "静态数据";
                    case "intetface_type.02":
                        return "API接口数据";
                    case "intetface_type.03":
                        return "SQL数据库数据";
                    case "intetface_type.04":
                        return "WebSocket";
                }
			}
		},
		data() {
			return {
				// 查询参数
				queryParam: {},
				// 表头
				columns: [{
						title: "序号",
						align: "center",
						width: 50,
						scopedSlots: {
							customRender: "serial",
						}
					},
					{
						title: "接口名称",
						align: "center",
						width: 300,
						dataIndex: "interfaceName",
					},
					{
						title: "接口编码",
						align: "center",
						dataIndex: "interfaceCode"
					},
                    {
                        title: "接口类型",
						align: "center",
						dataIndex: "interfaceType",
                        scopedSlots: {
							customRender: "renderInterfaceType",
						}
                    }
				],
				loadData: (parameter) => {
					const requestParameters = Object.assign({}, parameter, this.queryParam);
					return this.$post("/system/sysInterfaceManagement/getPageSet", requestParameters).then(
						(res) => {
							if(res.statusCode === 200){
                                return res.data;
                            }
						}
					);
				},
				selectedRowKeys: [],
				selectedRows: [],
                classifyData: [],
                masterLoading: false,
                visible: false,
                interfaceUuid: "",
                interfaceName: "",
                selectOption:undefined,
			};
		},
		computed: {
			rowSelection() {
				return {
					selectedRowKeys: this.selectedRowKeys,
					onChange: this.onSelectChange,
					type: "radio"
				};
			},
			scrollXY(){
				let subHeight = this.subHeight ? this.subHeight : 500
				let height = subHeight - 40 - 40
				return { y : height};
			},
		},
        mounted(){
        },
		methods: {
            // 跳转到新建接口页面
            addPort() {
                const jump = this.$router.resolve({name: 'interfaceManage'});
                window.open(jump.href,'_blank');
            },
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },
            selectThis(record){
                return {
                    on :{
                        click: ()=> {
                            this.selectedRowKeys = [record.uuid];
                            this.selectedRows = [record];
                        }
                    }
                }
            },
            getClassifyData(){
                this.masterLoading = true
                this.$post("/system/sysInterfaceClassification/selectAll").then(res => {
                    if (res.statusCode === 200) {
                        this.classifyData = res.data
                        this.masterLoading = false
                    }
                })
            },
            onSelectChange(selectedRowKeys, selectedRows) {
				this.selectedRowKeys = selectedRowKeys;
				this.selectedRows = selectedRows;
			},
            masterRowClick(e){
			    this.queryParam.classificationUuid = e
                this.selectedRowKeys = []
                this.$refs.subList.refresh()
            },
            handleSubmit(){
                this.interfaceUuid = this.selectedRows[0].uuid;
                this.interfaceName = this.selectedRows[0].interfaceName;
                this.$emit("change", this.interfaceName, this.interfaceUuid);
                this.visible = false;
            },
            handleCancel(){
                this.visible = false;
            },
            openModal(){
                this.visible = true;
                this.getClassifyData();
            },
            search(){
                this.selectedRowKeys = []
                this.$refs.subList.refresh(true)
            },
            reset(){
                this.selectOption = undefined
                this.selectedRowKeys = []
                this.queryParam = {}
                this.$refs.subList.refresh(true)
            }
		},
	};
</script>

<style lang="less" scoped>
    /deep/.ant-modal-body {
        padding-top: 0px !important;
    }
    /deep/.division-bar {
        background-color: #fff !important;
        height: 0px !important;
        margin-top: -5PX !important;
    }
</style>
